<template>
	<div class="trackWrap" >
		
        <div class="map" id="allmap">

			<!-- <div class="mark">
				
				<div class="head">
					货物信息
					<i>×</i>
				</div>
				<ul class="cont">
					<li>货物：螺纹钢</li>
					<li>委托量：10吨</li>
					<li>委托数量：3</li>
				</ul>
				<span class="tip"></span>
			</div>  -->
		</div>
        <div class="linesInfo">
			<ul class="header clearfix" v-show="lines.length>1">
				<li v-for="(item,index) in lines" :key="index" :class="{active: index==lineIndex}" @click="lineIndexActive(index)">{{item.line}} <i></i></li>
			</ul>
			<div class="only" v-show="lines.length == 1">线路1</div>
			<div class="adress" >
				<p>起:{{lines[vehicleListActiveIndex].beginAddress}}</p>
				<p>终:{{lines[vehicleListActiveIndex].endAddress}}</p>
			</div>
			<ul class="vehicle">
				<li @click="dispatchLine(item.tsDate,item.dsDate)" v-for="(item,index) in vehicleList[vehicleListActiveIndex]" :key="index">
					<span class="trackIcon"></span>
					<span>{{item.cartNo}}</span>
					<span>{{item.name}}</span>
					<span>{{item.phone}}</span>
				</li>
			</ul>
			<!-- <p class="moreTit">点击查看更多车辆信息</p> -->
        </div>
    </div>
</template>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=bDzcXaG0urozfHGDR1mttxUXIGpcEicf"></script>
<script type="text/ecmascript-6">
 import { MessageBox} from 'mint-ui';
	import ApiService from '@/services/API-servies'
	import {MP} from '../../common/js/map'  

	export default{
		data(){
			return{
				lines:[{line:'线路1',beginAddress:'',endAddress:''}],
				vehicleList:[],
				lineIndex:'',
				vehicleListActiveIndex:'0',
				trackMap:'',
				driving:'',
				carMk:'',
				marP1:'',
				marP3:'',
				m1Icon:'',
				m3Icon:'',
				newViwTrack:'',
				initViewPort:[],
			}
		},
		mounted(){
			let that = this;
			 setTimeout(() => {
              if(this.$isBrower.isAndroid){

                }else if(this.$isBrower.isIos){
                    this.setIosTitleType();
                }
              }, 0);
			this.initTrace();
		},
		methods:{
			initTrace(){
				let that = this;
				MP("bDzcXaG0urozfHGDR1mttxUXIGpcEicf").then( BMap => {
		            let map = new BMap.Map("allmap");            // 创建Map实例
	    			map.centerAndZoom(new BMap.Point(116.404, 39.915), 7);
				  	map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件  
				    map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件  
				    map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件  
				    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放 
	    			that.trackMap = map;
	    			that.initCart();
	            })
			},
			lineIndexActive(index){
				this.lineIndex = this.vehicleListActiveIndex = index;
			},initCart(){
				var that = this;
				let transBillId = this.$route.query.transBillId;
				 ApiService.trace.traceInfo({
		            transportId: transBillId,
		            type:'30'
		          }).then((res) => {
		            if (res.meta.retCode === '0') {
		            	this.lines = [];
		            	this.vehicleList = [];
		            	for(var i=0;i<res.data.length;i++){
		            		var _transportInfo = res.data[i];
							this.showCar(_transportInfo);

							var _line = {
								"line":'线路'+(i+1),
								"beginAddress":_transportInfo.beginSiteProvince,
								"endAddress":_transportInfo.endSiteProvince,
							}
							this.lines.push(_line);

							var _vehicleList = [];
							var dispatchList = _transportInfo.tspDispatch;
							for(var k=0;k<dispatchList.length;k++){
								var _dsData = dispatchList[k];
								var _vechicle = {"cartNo":_dsData.vehicleNum ,"name":_dsData.driverUserName,"phone":_dsData.driverPhone,"dsDate":_dsData,"tsDate":_transportInfo};
								_vehicleList.push(_vechicle);
							}
							this.vehicleList.push(_vehicleList);
					    }
					    setTimeout(function(){  
					    	that.trackMap.setViewport(that.initViewPort);          //调整到最佳视野  
					    },1000); 
		            }
		          });
			},showCar(data){
				let that = this;
				var dispatchList = data.tspDispatch;
				for(var k=0;k<dispatchList.length;k++){
					var _dsData = dispatchList[k];
					if('' == _dsData.longitudeLatitude){
						/*if( data.begingLonglat != '' && data.endLonglat != ''){
							this.beginEndLine(data);
							this.driving.search(that.marP1,that.marP3); 
							this.driving.setSearchCompleteCallback(function(){  
								if(undefined == that.driving.getResults()){
									return ;
								}
						    	var pts = that.driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组  
						        var polyline = new BMap.Polyline(pts);       
						        that.trackMap.addOverlay(polyline);
						        setTimeout(function(){  
						        	that.trackMap.setViewport([that.marP1,that.marP3]);          //调整到最佳视野  
						        },1000);  
						       
						    });  
						}*/
						
						return ;
					}
					var list = eval(_dsData.longitudeLatitude);
					var lastPt = list[list.length-1];
					var pt = new BMap.Point(lastPt.Long, lastPt.Lat);
					var myIcon = new BMap.Icon("http://www.chuanqi56.com/imgs/icon/car.png", new BMap.Size(50,47));
					var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
					marker2.customData = {myProperty:_dsData,data:data};
					that.trackMap.addOverlay(marker2);              // 将标注添加到地图中
					marker2.addEventListener("click",that.drawIcon);//添加点击事件
					this.initViewPort.push(pt);
				}
				
			},drawIcon(e){
				var data = e.target.customData.myProperty;
				var _data = e.target.customData.data;
				this.dispatchLine(_data,data);
			},drawGreenLine(i,list,data){
				var _marP1 = new BMap.Point(list[i].Long,list[i].Lat);
			   	if(i == 0){
			   		this.driving.search(this.marP1, _marP1); 
			   	}
			   	if(list[i+1] != undefined){
			   		var _marP2 = new BMap.Point(list[i+1].Long,list[i+1].Lat);
			   		this.driving.search(_marP1, _marP2); 
			   	}else{
			   		this.driving.search(_marP1, this.marP3);
			   	}
			   if(i == list.length-1){
				    this.newViwTrack = new BMap.Point(list[i].Long,list[i].Lat);//最佳视野线路
				    var vehicleno = data.productTypeNameByApp,totalGoodsWeightByApp= data.totalGoodsWeightByApp,
				    totalGoodsCountByApp = data.totalGoodsCountByApp;
				   var _html ='<div class="mark"><div class="head">货物信息<i>×</i></div><ul class="cont">' 
							+'<li>货物：'+vehicleno+'</li>'
							+'<li>委托量：'+totalGoodsWeightByApp+'吨</li>'
							+'<li>委托数量：'+totalGoodsCountByApp+'件</li>'
							+'</ul><span class="tip"></span></div> ';
				   //var info = "<div>货物："+vehicleno +"</div><div>委托量："+totalGoodsWeightByApp+"</div><div>委托数量："+totalGoodsCountByApp+"</div>";
				   	this.carMk = new BMap.Label(_html,{position:new BMap.Point(list[i].Long,list[i].Lat)}); 
					   this.trackMap.addOverlay(this.carMk);
					   this.carMk.setStyle({
						border:'none',
						height : "20px",
						//lineHeight : "20px",
						fontFamily:"微软雅黑",
						maxWidth:"none",
						marginLeft:'-100px',
						marginTop:'-200px'
						});
			   }
			},dispatchLine(_data,data){
				 var list = eval(data.longitudeLatitude);
				let that = this;
				if(list != undefined){
					this.trackMap.clearOverlays();
				}
				this.initCart();
				//初始化开始结束路线
				this.beginEndLine(_data);
			    if(this.carMk){  
			   	 	this.trackMap.removeOverlay(this.carMk);  
			    }  
			   
			    if(list == undefined){
			    		MessageBox('提示', '没有物流信息');
			    	return ;
			    }
			    for(var i=0;i<list.length;i++){  
			        that.drawGreenLine(i,list,_data);  
			    }  
			    this.driving.setSearchCompleteCallback(function(){  
			    	var pts = that.driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组  
			        var polyline = new BMap.Polyline(pts);       
			        that.trackMap.addOverlay(polyline);
			        setTimeout(function(){  
			        	that.trackMap.setViewport([that.marP1,that.newViwTrack,that.marP3]);          //调整到最佳视野  
			        },1000);  
			    });  
			},beginEndLine(_data){
				let that = this;
				var _bglt = eval('(' + _data.begingLonglat + ')');
				this.marP1 = new BMap.Point(_bglt.Long,_bglt.Lat);  // new BMap.Point(121.48054,31.235929);    //起点
				var m1Icon = new BMap.Icon("http://www.chuanqi56.com/imgs/icon/begin.png", new BMap.Size(30,40));
				var m1 = new BMap.Marker(this.marP1,{icon:m1Icon});         //创建3个marker  
				this.trackMap.addOverlay(m1);
				var _edlt = eval('(' + _data.endLonglat + ')');
				this.marP3 = new BMap.Point(_edlt.Long,_edlt.Lat);//new BMap.Point(116.413387,39.910924);    //终点
				var m3Icon = new BMap.Icon("http://www.chuanqi56.com/imgs/icon/end.png", new BMap.Size(30,40));
				var m3 = new BMap.Marker(this.marP3,{icon:m3Icon});  
				this.trackMap.addOverlay(m3);
				this.driving = new BMap.DrivingRoute(that.trackMap);
			},//ios 设置头部信息
		    setIosTitleType(){
		      let params = {
		        isReturn: true,
		        isSearch: false,
		        isTitleSegment:false
		      };
		      this.$bridge.callhandler('needBarButton', params, (data) => {})
		    }
		},
		filters:{},
		components:{

		}
	}
</script>
<style lang="less" type="stylesheet/less">
	@import "~common/less/variable";
	.trackWrap{
		height: 100%;
		background: #eee;
		.map{
			height: 100%;
			.mark{
				position: relative;
				width: 400px;
				background: #fff;
				.head{
					background: @blue;
					color: #fff;
					text-align: center;
					position: relative;
					i{
						font-size: 36px;
						position: absolute;
						right: 22px;
						top: 0;
					}
				}
				.cont{
					font-size: 28px;
					color: #333;
					line-height: 50px;
					font-weight: normal;
					padding:20px 40px;
					border: 1px solid @blue;
				}
				.tip{
					position: absolute;
					bottom: 0;
					left: 50%;
					margin-left: -25px;
					margin-bottom: -25px;
					display: block;
					width: 50px;
					height: 50px;
					background: #fff;
					border-left: 1px solid @blue;
					border-top: 1px solid @blue;
					-webkit-transform: rotate(-135deg);
				}
			}
			.BMapLabel{
		.mark{
				position: relative;
				width: 400px;
				background: #fff;
				.head{
					background: @blue;
					color: #fff;
					text-align: center;
					position: relative;
					padding: 14px 0;
					i{
						font-size: 36px;
						position: absolute;
						right: 22px;
						top: 14px;
					}
				}
				.cont{
					font-size: 28px;
					color: #333;
					line-height: 50px;
					font-weight: normal;
					padding:20px 40px;
					border: 1px solid @blue;
				}
				.tip{
					position: absolute;
					bottom: 0;
					left: 50%;
					margin-left: -25px;
					margin-bottom: -25px;
					display: block;
					width: 50px;
					height: 50px;
					background: #fff;
					border-left: 1px solid @blue;
					border-top: 1px solid @blue;
					-webkit-transform: rotate(-135deg);
				}
			}
		}
		}
		.linesInfo{
			position: fixed;
			bottom: 0;
			width: 100%;
			background: rgba(255,255,255,0.9);
			.header{
				display:-webkit-box;
				// justify-content: space-between;
				li{
					-webkit-box-flex:1;
					text-align: center;
					background: #fff;
					position: relative;
					font-size: 30px;
					padding: 4px 0;
					&.active{
						background: @blue;
						color: #fff;
						i{
							background: @blue;
						}
					}
					i{
						display: block;
						width: 20px;
						height: 20px;
						background: transparent;
						-webkit-transform: rotate(45deg);
						position: absolute;
						bottom: 0;
						left: 50%;
						margin-left: -10px;
						margin-bottom: -10px;
					}
				}
			}
			.only{
				color: @blue;
				border-bottom: 1px solid #D0D0D0;
				font-size: 30px;
				padding: 6px 0 6px 40px;
			}
			.adress{
				padding:8px 40px 0;
				font-size: 26px;
				color:#666;
			}
			.vehicle{
				font-size: 28px;
				max-height: 366px;
				overflow: auto;
				li{
					border-top: 1px solid #ccc;
					padding-left: 40px;
					.trackIcon{
						width: 60px;
						height: 40px;
						background: url(../../common/imgs/trackIcon.png) no-repeat 0 0;
						background-size: 100% 100%;
						vertical-align:middle;
					}
					span{
						display: inline-block;
						text-align: left;
						&:nth-child(1){
							width: 60px;
							margin-right: 16px;
						}
						&:nth-child(2){
							width: 170px;
						}
						&:nth-child(3){
							width: 130px;
						}
						&:nth-child(4){
						}
					}
				}
			}
			.moreTit{
				color: #999;
				font-size: 24px;
				text-align: center;
			}
		}
	}
</style>
